<template>
  <div class="container">
    <div class="header">在线海洋监测数据可视化信息管理系统---巡防员</div>
    <div class="finish-button">
      <el-popconfirm
        @confirm="clickConfirm"
        confirm-button-text="已完成"
        cancel-button-text="再确认下"
        icon="el-icon-info"
        icon-color="red"
        title="已经确认当日各项监测设备正常吗？"
      >
        <el-button
          slot="reference"
          type="danger"
          :disabled="finish_today_work"
          plain
          >设备确认完成</el-button
        >
      </el-popconfirm>
    </div>
    <div class="showIdentity">
      <strong>{{ userInfo.province }}</strong
      >省<strong>{{ userInfo.prefecture }}</strong
      >市<strong>{{ userInfo.sea_area }}</strong
      >海域<strong>{{ userInfo.monitor_point_code }}</strong
      >监测点 <strong>{{ userInfo.account }}</strong
      >用户
    </div>

    <div class="showCard">
      <el-row>
        <el-col :span="8" v-for="item in deviceList" :key="item.id">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span style="vertical-align: middle">{{ item.device_name }}</span>
              <el-button
                icon="el-icon-search"
                circle
                size="small"
                style="float: right"
                @click="showDeviceInfo(item.device_id)"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-document"
                size="small"
                style="float: right"
                circle
                @click="showDeviceTimeline(item.device_id)"
              ></el-button>
              <el-button
                size="small"
                round
                style="float: right"
                plain
                type="primary"
                @click="getDeviceState(item.id)"
                :disabled="finish_today_work"
                >修改状态</el-button
              >
            </div>
            <img :src="item.device_image" class="image" />
            <div class="device-info device-name">
              <span class="device-info-title">设备名称 :</span>
              <span>{{ item.device_name }}</span>
            </div>
            <div class="device-info device-status">
              <span class="device-info-title">设备状态 :</span>
              <!-- <span>{{ device_status(item.use_status) }}</span> -->
              <el-tag :type="tag_type(item.use_status)">{{
                device_status(item.use_status)
              }}</el-tag>
            </div>
            <div class="device-info use-start-time">
              <span class="device-info-title">设备投入使用时间 :</span>
              <span>{{ item.use_start_time }}</span>
            </div>
            <div class="device-info description">
              <span class="device-info-title">设备描述 :</span>
              <span>{{ item.product_description }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog
      title="设备详情页"
      :visible.sync="showDeviceDialogVisible"
      width="45%"
    >
      <div class="detail-dialog">
        <div>
          <span class="info-title">设备名称：</span>
          <span>{{ showDevice.device_name }}</span>
        </div>
        <div>
          <span class="info-title">设备描述：</span>
          <span>{{ showDevice.product_description }}</span>
        </div>
        <div>
          <span class="info-title">技术参数：</span>
          <div
            class="show-table"
            v-for="item in showDevice.technical_parameter"
            :key="item[0]"
          >
            {{ item[0] }}: {{ item[1] }}
          </div>
        </div>
        <div>
          <span class="info-title">测量范围：</span>
          <div
            class="show-table"
            v-for="item in showDevice.measuring_range"
            :key="item[0]"
          >
            {{ item[0] }}: {{ item[1] }}
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="设备状态修改" :visible.sync="changeStateDialogVisible">
      <el-form :model="form">
        <el-form-item label="设备状态">
          <el-select v-model="form.state" placeholder="请选择设备状态">
            <el-option label="正常使用" value="1"></el-option>
            <el-option label="维修流程中" value="0"></el-option>
            <el-option label="设备损坏" value="-1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeStateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeState()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="设备状态时间线"
      :visible.sync="showTimelineDialogVisible"
      width="40%"
    >
      <el-timeline reverse>
        <el-timeline-item
          v-for="(item, index) in operate_data"
          :key="index"
          :timestamp="item.timestamp"
        >
          {{ item.content }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {},
      deviceList: [],
      // 展示对话框的显示与隐藏
      showDeviceDialogVisible: false,
      // 设备展示信息
      showDevice: {},
      changeStateDialogVisible: false,
      form: {
        id: "",
        state: "",
        device_id: "",
      },
      // 设备状态时间线
      showTimelineDialogVisible: false,
      operate_data: [],
      // 打卡设备状态
      finish_today_work: false,
    };
  },
  created() {
    this.getUserInfo();
    this.getDeviceList();
    this.CheckIsCompleted();
  },
  mounted() {},
  computed: {
    device_status() {
      return function (status) {
        if (status == 1) return "正常使用";
        else if (status == 0) return "维修流程中";
        else if (status == -1) return "设备损坏";
      };
    },
    tag_type() {
      return function (status) {
        if (status == 1) return "success";
        else if (status == 0) return "warning";
        else if (status == -1) return "danger";
      };
    },
  },
  methods: {
    getUserInfo() {
      this.$axios({
        url: "getUserInfo",
        params: this.$store.state.userInfo,
      })
        .then((res) => {
          let user_info = Object.assign(res.data, {
            account: this.$store.state.userInfo.account_number,
            monitor_point_code: this.$store.state.userInfo.monitor_point_code,
          });
          this.userInfo = user_info;
        })
        .catch((err) => err);
    },
    getDeviceList() {
      this.$axios({
        url: "getDeviceList",
        params: {
          monitor_point_code: this.$store.state.userInfo.monitor_point_code,
        },
      })
        .then((res) => {
          this.deviceList = res.data;
        })
        .catch((err) => err);
    },
    //展示设备详情
    showDeviceInfo(id) {
      this.showDeviceDialogVisible = true;
      this.$axios({
        method: "get",
        url: "device/" + id,
      })
        .then((res) => {
          this.showDevice = res.data;
          this.showDevice.technical_parameter = !this.showDevice
            .technical_parameter
            ? this.showDevice.technical_parameter
            : this.process_wrap(this.showDevice.technical_parameter);
          this.showDevice.measuring_range = !this.showDevice.measuring_range
            ? this.showDevice.measuring_range
            : this.process_wrap(this.showDevice.measuring_range);
        })
        .catch((err) => console.log(err));
    },
    // 换行数据处理
    process_wrap(text) {
      let arr = (text || "").split("#");
      for (let i in arr) {
        arr[i] = arr[i].split("：");
      }
      return arr;
    },
    getDeviceState(id) {
      this.changeStateDialogVisible = true;
      this.$axios({
        method: "get",
        url: "deviceState/" + id,
      })
        .then((res) => {
          this.form = res.data;
        })
        .catch((err) => console.log(err));
    },
    changeState() {
      // 写入状态改变
      let time = this.common.getNowDate();
      let state = this.form.state;
      let describe;
      if (state == 1) describe = "修改设备状态为正常使用";
      else if (state == 0) describe = "修改设备状态为维修流程中";
      else if (state == -1) describe = "修改设备状态为设备损坏";
      this.$axios({
        method: "put",
        url: "changeDeviceState",
        // data: this.form,
        data: {
          device_table_id: this.form.id,
          device_state: state,
          device_id: this.form.device_id,
          operator_id: this.$store.state.userInfo.id,
          monitor_point_code: this.$store.state.userInfo.monitor_point_code,
          time,
          describe,
        },
      })
        .then((res) => {
          if (res.data == 1) {
            // 隐藏对话框
            this.changeStateDialogVisible = false;
            // 刷新列表
            this.getDeviceList();
            //提示修改成功
            this.$message.success("更新设备状态成功");
          } else if (res.data == 0) {
            this.changeStateDialogVisible = false;
            this.$message.error("抱歉，更新失败");
          }
        })
        .catch((err) => err);
    },
    // 设备操作时间线
    showDeviceTimeline(id) {
      // id 是设备id
      this.showTimelineDialogVisible = true;
      this.$axios({
        method: "get",
        url: "operateDeviceLogs/" + id,
        params: {
          monitor_point_code: this.$store.state.userInfo.monitor_point_code,
        },
      })
        .then((res) => {
          let log_data = [];
          for (let item of res.data) {
            log_data.push({
              content:
                "巡防员" +
                item.account_number +
                " " +
                item.operation_description,
              timestamp: item.operation_time,
            });
          }
          this.operate_data = log_data;
        })
        .catch((err) => console.log(err));
    },
    // 查看是否巡防完毕
    CheckIsCompleted() {
      this.$axios({
        method: "get",
        url: "confirmDevice",
        params: {
          operator: this.$store.state.userInfo.account_number,
          monitor_point_code: this.$store.state.userInfo.monitor_point_code,
        },
      })
        .then((res) => {
          if (res.data != 0) {
            this.finish_today_work = true;
          }
        })
        .catch((err) => err);
    },

    // 巡防员确认设备巡防完毕
    clickConfirm() {
      let time = this.common.getNowDate();
      // 向日志中写入
      this.$axios({
        method: "post",
        url: "confirmDevice",
        data: {
          operator: this.$store.state.userInfo.account_number,
          monitor_point_code: this.$store.state.userInfo.monitor_point_code,
          time,
        },
      })
        .then((res) => {
          if (res.data == 1) {
            this.finish_today_work = true;
            this.$message({
              showClose: true,
              message: "已完成今日设备状态确认！",
              type: "success",
            });
          }
        })
        .catch((err) => err);
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  height: 60px;
  background: linear-gradient(to right, #00bfff, #87cefa);
  font-size: 30px;
  color: white;
  padding: 7px;
  line-height: 60px;
}
.finish-button {
  float: right;
  position: relative;
  right: 40px;
  top: 15px;
}
.showIdentity {
  margin: 20px;
  font-size: 20px;
}
.showIdentity el-tag {
  font-size: 20px !important;
}
.showIdentity strong {
  margin: 0px 3px 0px 3px;
}
.showCard {
  margin: 20px;
}
/* 卡片样式 */
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  margin-bottom: 20px;
}
/* 卡片内样式 */
.image {
  width: 200px;
  height: 220px;
  display: block;
  margin: 0 auto;
}
.device-info {
  margin: 14px;
}
.description {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.device-info-title {
  margin-right: 4px;
}
.detail-dialog {
  font-size: 15px;
  > div {
    margin: 5px 0px;
    .info-title {
      font-weight: 800;
    }
    .show-table {
      margin: 0px 25px;
    }
  }
}
</style>

